<template>
  <div class="document-manager-wapper">
    <van-nav-bar
      title="指令列表"
      left-text="返回"
      left-arrow
      fixed
      @click-left="onClickLeft"
    >
      <!--<van-icon name="arrow-left" slot="left"/>-->
      <div slot="right">
        <van-button
          type="primary"
          round
          size="small"
          @click="draggabelClick"
          v-if="flag == 0"
          >{{ buttonName }}
        </van-button>
        <van-button
          type="warning"
          round
          size="small"
          @click="draggabelClick"
          v-if="flag == 1"
          >{{ buttonName }}
        </van-button>
      </div>
      <van-icon name="search" slot="left" />
    </van-nav-bar>
    <div class="document-content">
      <van-pull-refresh
        v-model="isLoading"
        success-text="刷新成功"
        @refresh="onRefresh"
      >
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <draggable element="div" v-model="list" :options="options">
            <div
              class="cell-content"
              @click="showInfo(item.taskcode)"
              v-for="(item, index) in list"
              :key="index"
            >
              <!-- 使用 title 插槽来自定义标题 -->

              <div class="custom-title">{{ item.billid }}</div>

              <div class="custom-title1">
                <span class="user-line-input">起始库位</span>
                <span class="user-line-label">
                  {{ item.picklocationid }}
                </span>
              </div>
              <div class="custom-title1">
                <span class="user-line-input">目标库位</span>
                <span class="user-line-label">
                  {{ item.droplocationid}}
                </span>
              </div>
            </div>
          </draggable>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { getAll } from "@/api/Invtask.js";
import draggable from "vuedraggable";
import { Toast } from "vant";
export default {
  name: "Instruction",
  components: {
    //调用组件
    draggable
  },
  data() {
    return {
      list: [],
      isLoading: false,
      loading: false,
      finished: false,
      pageInfo: {
        page: 0,
        pageSize: 20
      },
      options: { filter: ".undraggable", sort: false, disabled: true },
      buttonName: "编辑",
      flag: 0,
      primary: "primary"
    };
  },
  methods: {
    onClickLeft() {
      console.log("onClickLeft");
      // this.$router.back(-1);
      this.$router.push({
        path: "/instructionSearch"
      });
    },
    draggabelClick() {
      if (this.flag == 0) {
        this.options.sort = true;
        this.options.disabled = false;
        this.primary = "danger";
        this.buttonName = "保存";
        this.flag = 1;
        console.log("==list=0==", this.list);
      } else {
        this.options.sort = false;
        this.options.disabled = true;
        this.buttonName = "编辑";
        this.primary = "primary";
        this.flag = 0;
        console.log("==list===", this.list);
      }
    },
    showInfo(id) {
      this.$router.push({
        path: "/order/action",
        query: { taskcodeId: id }
      });
    },
    getGoodsList(flag) {
      var that = this;
      getAll(this.pageInfo).then(res => {
        // console.info(res.data[1]);
        that.loading = false;
        if (res.data && res.data.length > 0) {
          this.list = this.list.concat(res.data);
        } else {
          that.finished = true;
        }
        if (flag) {
          Toast("刷新成功");
          this.isLoading = false;
        }
      });
    },
    onLoad() {
      this.pageInfo.page += 1;
      this.getGoodsList();
    },
    onRefresh() {
      this.pageInfo.page = 1;
      this.list = [];
      this.getGoodsList(true);
    }
  }
};
</script>

<style scoped lang="scss">
.document-manager-wapper {
  position: relative;
  .document-content {
    position: relative;
    top: 46px;
    height: calc(100% - 50px);
    margin-bottom: 10px;
    overflow-y: auto;
    .cell-content {
      padding: 5px 10px;
      background: #fff;
      border-bottom: solid 1px #ddd;
    }
    .custom-title {
      color: #000;
      /*padding: 8px 0px;*/
      font-weight: bold;
    }
    .custom-title1 {
      color: #000;
      /*padding: 8px 0px;*/
      padding-top: 5px;
      span {
        font-size: 12px;
      }
    }
    .user-line-label {
      width: 140px;
      text-align: right;
      font-size: 14px;
      color: #606266;
      line-height: 1;
      /*padding: 0px 12px 10px 0;*/
      box-sizing: border-box;
      display: inline-block;
    }
    .user-line-input {
      position: relative;
      display: inline-block;
      font-size: 14px;
      vertical-align: top;
      width: calc(100% - 140px);
    }
  }
}
</style>
